import router, { asyncRoutes } from './router'
import store from './store' // 导入store对象
// 导入进度条插件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 导入进度条样式
import getPageTitle from './utils/get-page-title'

const whiteList = ['/login', '404'] // no redirect whitelist 白名单

// 前置路由守卫 钩子函数
router.beforeEach(async(to, from, next) => {
  NProgress.start()// 显示进度条效果

  // console.log(to) // to.path拿到当前路由路径
  const token = store.getters.token // 通过store对象拿到getters里映射的token
  if (token) { // 如果有token 判断是否在login页，访问的是登录页面，直接跳转到主页
    // 如果加了await ，等待请求完成才能切换路由页面（注意：需要actions有return才行，不然一直等待）
    // 如果不加await，先切换路由页面，网络请求成功，再去更新getters内的name值->也能让页面显示名字
    if (!store.getters.name) {
      const menu = await store.dispatch('user/getUserInfoActions')
      const routeArr = [] // 新建空数组，用来放当前员工的权限
      console.log('当前员工的菜单权限数组menu')
      console.log(menu) // 当前员工的菜单权限（路由）对象数组
      menu.forEach(str => {
        const obj = asyncRoutes.find(item => {
          return item.path === '/' + str // find内返回true，当前对象返回到find调用位置
        })
        if (obj !== undefined) { // 在menu标识数组里找到了这个匹配的规则对象，再加入
          routeArr.push(obj) // 动态规则对象加入到数组里
        }
      })

      // 判断是否存在用户信息，如果存在并使用 addRoutes 动态添加
      router.addRoutes([...routeArr, { path: '*', redirect: '/404', hidden: true }])

      // 将动态路由传给mutation方法，合并动态和静态路由数组
      store.commit('permission/setRoutes', [...routeArr, { path: '*', redirect: '/404', hidden: true }])
      // 再去sideBar.vue 在菜单生成部分改写使用vuex中的数据

      // 解决：刷新白屏的问题
      setTimeout(() => {
        // 动态路由添加完成以后，我们再重定向到本来要去的页面->再次执行路由守卫
        // 刚才动态路由已经添加完毕，所以跳转一次（2次）
        next({
          path: to.path,
          replace: true
        })
      }, 0)
    }
    if (to.path === '/login') {
      next('/')
    } else { // 如果存在 token，访问的是其他页面，直接放行
      next()
    }
  } else { // 没有token 未登录或者是token 过期了 token过期需要额外添加功能
    // 如果去登录页，放行，去别的页面没有登录没有token就不让去（打回login页）
    // includes判断要去的页面路径是否在白名单里出现过，如果是就返回true
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  //

  // 判断是否有token ，练习
  // if (token) {
  //   if (to.path === '/login') {
  //     next('/')
  //   } else {
  //     next()
  //   }
  // } else {
  //   if (whiteList.includes(to.path)) {
  //     next()
  //   } else {
  //     next('/login')
  //   }
  // }
})

// 后置路由守卫
router.afterEach((to, from) => {
  NProgress.done() // 隐藏进度条效果

  // 保存浏览器标题
  document.title = getPageTitle(router.currentRoute.meta.title) // store.currentRoute是当前的路由对象 .meta.title拿到meta里的title
})
